From 8d065b558e318bc7a8511b87edb3fff0902efbdd Mon Sep 17 00:00:00 2001 From: Sam Hewitt Date: Mon, 16 Sep 2024 12:14:44 -0230 Subject: [PATCH] style: Clean up dialogs stylesheet to fix layout issues - remove unnecessary dialog type-specific padding, spacing and margin definitions that led to layout to problems - bump the size of user avatar in authentication dialog - nest css classes in the sass to better reflect the structure of dialog elements - sync style of audio device selector with switcher-popup style - sync text and padding styles with other elements - fix incorrect button order in audio selection dialog Closes: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/7876 Part-of: --- .../gnome-shell-sass/widgets/_dialogs.scss | 196 ++++++++++-------- js/ui/audioDeviceSelection.js | 11 +- js/ui/components/polkitAgent.js | 2 +- js/ui/dialog.js | 3 +- js/ui/main.js | 2 +- 5 files changed, 114 insertions(+), 100 deletions(-) diff --git a/data/theme/gnome-shell-sass/widgets/_dialogs.scss b/data/theme/gnome-shell-sass/widgets/_dialogs.scss index c08eb91ba..4136bfce5 100644 --- a/data/theme/gnome-shell-sass/widgets/_dialogs.scss +++ b/data/theme/gnome-shell-sass/widgets/_dialogs.scss @@ -1,24 +1,49 @@ /* Modal Dialogs */ -.headline { - @extend %title_4; -} - +// style for all dialogs .modal-dialog { background-color: $bg_color; border-radius: $alert_radius; - box-shadow: inset 0 0 0 1px $outer_borders_color; padding: $base_padding * 4; + spacing: $base_padding * 3; + box-shadow: 0 12px 8px 12px rgba(0,0,0,0.03); .modal-dialog-content-box { - spacing: $base_margin * 8; - margin-top: $base_margin * 2; - margin-bottom: $base_margin * 4; + padding-top: $base_padding * 2; + spacing: $base_padding * 3; max-width: 28em; } - .modal-dialog-linked-button { - @extend %dialog_button; + .modal-dialog-button-box { + padding-top: $base_padding; + .modal-dialog-button { + @extend %dialog_button; + } + } +} + +// lists in dialogs +.dialog-list { + spacing: $base_padding * 3; + + .dialog-list-title { + @extend %heading; + text-align: center; + } + + .dialog-list-scrollview { max-height: 200px; } + .dialog-list-box { + spacing: 1em; + + .dialog-list-item { + spacing: 1em; + + .dialog-list-item-title { font-weight: bold; } + .dialog-list-item-description { + @extend %caption; + color: darken($fg_color,5%); + } + } } } @@ -26,9 +51,14 @@ .end-session-dialog { width: 24em; + // special style for session warnings .end-session-dialog-battery-warning, .dialog-list-title { color: $warning_color; + background-color: transparentize($warning_color, 0.9); + padding: $base_padding * 1.5; + border-radius: $base_border_radius; + margin: $base_margin 0; } } @@ -40,125 +70,102 @@ text-align: center; @extend %title_2; - &.lightweight { @extend %title_4;} + &.lightweight { + @extend %title_4; + } } - .message-dialog-description { text-align: center; } -} - -/* Dialog List */ -.dialog-list { - spacing: $base_padding * 3; - - .dialog-list-title { + .message-dialog-description { text-align: center; - @extend %heading; - } - - .dialog-list-scrollview { max-height: 200px; } - .dialog-list-box { - spacing: 1em; - - .dialog-list-item { - spacing: 1em; - - .dialog-list-item-title { font-weight: bold; } - .dialog-list-item-description { - color: darken($fg_color,5%); - @extend %caption; - } - } } } /* Run Dialog */ .run-dialog { - .modal-dialog-content-box { - margin-top: $base_padding * 4; - margin-bottom: $base_padding * 2; + width: 24em; + + // run dialog needs to override bottom padding + // to account for inexplicable extra padding + padding-bottom: $base_padding; + + .run-dialog-entry { + padding: $base_padding * 2 $base_padding * 1.5; } - .run-dialog-entry { width: 20em; } .run-dialog-description { @extend %caption; - text-align: center; color: darken($fg_color, 20%); } } /* Password or Authentication Dialog */ - .prompt-dialog { width: 28em; - .modal-dialog-content-box { - margin-bottom: $base_margin * 6; - } -} - -.prompt-dialog-password-grid { - spacing-rows: $base_margin * 2; - spacing-columns: $base_margin; - - .prompt-dialog-password-entry { - width: auto; + .prompt-dialog-password-grid { + spacing-rows: $base_margin * 2; + spacing-columns: $base_margin; - // 4px (spacing) + 16px (spinner-width) - &:ltr { margin-left: $base_margin+$base_icon_size; } - &:rtl { margin-right: $base_margin+$base_icon_size; } + .prompt-dialog-password-entry { + width: auto; + padding: $base_padding * 2 $base_padding * 1.5; + // 4px (spacing) + 16px (spinner-width) + &:ltr { margin-left: $base_margin+$base_icon_size; } + &:rtl { margin-right: $base_margin+$base_icon_size; } + } } -} - -.prompt-dialog-password-layout { - spacing: $base_margin * 2; -} -.prompt-dialog-password-entry { - width: 20em; -} + .prompt-dialog-password-layout { + spacing: $base_margin * 2; + } -.prompt-dialog-error-label, -.prompt-dialog-info-label, -.prompt-dialog-null-label { - text-align: center; - @extend %caption; -} + .prompt-dialog-error-label, + .prompt-dialog-info-label, + .prompt-dialog-null-label { + @extend %caption; + text-align: center; + } -.prompt-dialog-error-label { - color: $warning_color; + .prompt-dialog-error-label { + color: $warning_color; + } } - /* Polkit Dialog */ - .polkit-dialog-user-layout { text-align: center; spacing: $base_margin * 2; margin-bottom: $base_padding; - .polkit-dialog-user-root-label { color: $warning_color; } + .polkit-dialog-user-label, + .polkit-dialog-user-root-label { + @extend %title_4; + } + + .polkit-dialog-user-root-label { + color: $warning_color; + } } /* Audio selection dialog */ .audio-device-selection-dialog { - .modal-dialog-content-box { margin-bottom: $base_margin * 7; } - .audio-selection-box { spacing: $base_margin * 5; } -} + min-width: 24em; -.audio-selection-device { - border-radius: $base_border_radius * 2; - &:hover,&:focus { background-color: $hover_bg_color; } - &:active { - background-color: -st-accent-color; - color: -st-accent-fg-color; - } -} + .audio-selection-box { + spacing: $base_padding * 2; -.audio-selection-device-box { - padding: $base_margin * 5; - spacing: $base_margin * 5; -} + // styled similar to switcher-popup + .audio-selection-device { + @include tile_button($fg:$osd_fg_color, $bg:$osd_bg_color); -.audio-selection-device-icon { - icon-size: $base_icon_size * 4; + .audio-selection-device-box { + padding: $base_padding * 2; + spacing: $base_padding * 2; + } + + .audio-selection-device-icon { + icon-size: $base_icon_size * 4; + } + } + } } /* Welcome dialog */ @@ -173,4 +180,9 @@ /* Access portal dialog */ .access-dialog { text-align: center; -} \ No newline at end of file +} + +// specific label style for restart message +.restart-message { + @extend %title_4; +} diff --git a/js/ui/audioDeviceSelection.js b/js/ui/audioDeviceSelection.js index d4d5e12ab..bc6b263b7 100644 --- a/js/ui/audioDeviceSelection.js +++ b/js/ui/audioDeviceSelection.js @@ -55,17 +55,18 @@ const AudioDeviceSelectionDialog = GObject.registerClass({ this.contentLayout.add_child(content); + this.addButton({ + action: () => this.close(), + label: _('Cancel'), + key: Clutter.KEY_Escape, + }); + if (Main.sessionMode.allowSettings) { this.addButton({ action: this._openSettings.bind(this), label: _('Sound Settings'), }); } - this.addButton({ - action: () => this.close(), - label: _('Cancel'), - key: Clutter.KEY_Escape, - }); } _getDeviceLabel(device) { diff --git a/js/ui/components/polkitAgent.js b/js/ui/components/polkitAgent.js index 10ac3563f..fbee70230 100644 --- a/js/ui/components/polkitAgent.js +++ b/js/ui/components/polkitAgent.js @@ -21,7 +21,7 @@ const DialogMode = { CONFIRM: 1, }; -const DIALOG_ICON_SIZE = 64; +const DIALOG_ICON_SIZE = 96; const DELAYED_RESET_TIMEOUT = 200; diff --git a/js/ui/dialog.js b/js/ui/dialog.js index 3f918981c..8db4eb5ce 100644 --- a/js/ui/dialog.js +++ b/js/ui/dialog.js @@ -56,6 +56,7 @@ class Dialog extends St.Widget { this._dialog.add_child(this.contentLayout); this.buttonLayout = new St.Widget({ + style_class: 'modal-dialog-button-box', layout_manager: new Clutter.BoxLayout({ spacing: 12, homogeneous: true, @@ -124,7 +125,7 @@ class Dialog extends St.Widget { keys = []; let button = new St.Button({ - style_class: 'modal-dialog-linked-button', + style_class: 'modal-dialog-button', button_mask: St.ButtonMask.ONE | St.ButtonMask.THREE, reactive: true, can_focus: true, diff --git a/js/ui/main.js b/js/ui/main.js index a854fa04c..25c28b240 100644 --- a/js/ui/main.js +++ b/js/ui/main.js @@ -988,7 +988,7 @@ class RestartMessage extends ModalDialog.ModalDialog { _init(message) { super._init({ shellReactive: true, - styleClass: 'restart-message headline', + styleClass: 'restart-message', shouldFadeIn: false, destroyOnClose: true, }); -- 2.39.5